<template>
  <view v-if="type == 0" class="wf-item-page wf-page0" :style="viewColor">
    <view class="pictrue">
      <easy-loadimage v-if="item?.image" :image-src="item?.image"></easy-loadimage>
      <view v-if="item?.stock == 0" class="sell_out">已售罄</view>
      <view
        v-if="item.border_pic"
        :style="{ backgroundImage: `url(${item.border_pic})` }"
        class="border-picture"
      >
      </view>
    </view>
    <view class="text">
      <view class="name line2">{{ item?.store_name || item?.title }}</view>
      <view class="acea-row row-middle">
        <view class="money" v-if="item?.price"
          >￥
          <text class="num">{{
            item?.after_coupon_price || item?.price || item?.originalPrice
          }}</text>
        </view>
        <view v-else-if="!item?.content.includes('<')" class="name line2">{{ item?.content }}</view>
        <view class="name line2" v-else>
          {{ item?.title }}
        </view>
      </view>
      <view
        v-if="item.show_svip_info && item.show_svip_info.show_svip_price && item.svip_price"
        class="acea-row row-middle svip"
      >
        <text class="vip-money">￥{{ item.svip_price }}</text>
        <view class="vipImg">
          <image src="/static/images/svip.png"></image>
        </view>
      </view>
      <view class="item_tags">
        <text
          v-if="item?.product_type == 0 && item?.merchant?.type_name"
          class="font-bg-red b-color"
          >{{ item?.merchant?.type_name }}</text
        >
        <text
          v-else-if="item?.product_type == 0 && item?.merchant?.is_trader"
          class="font-bg-red b-color"
          >自营</text
        >
        <text v-if="item?.product_type != 0" :class="'font_bg-red type' + item?.product_type">{{
          item?.product_type == 1
            ? '秒杀'
            : item?.product_type == 2
            ? '预售'
            : item?.product_type == 3
            ? '助力'
            : item?.product_type == 4
            ? '拼团'
            : ''
        }}</text>
        <text class="tags_item ticket" v-if="item?.issetCoupon"
          >{{ item?.issetCoupon?.coupon_price }}元</text
        >
        <text class="tags_item delivery" v-if="item?.delivery_free == 1">包邮</text>
      </view>
    </view>
  </view>
  <view v-else-if="type == 1" class="wf-page1" :style="viewColor">
    <view class="pictrue">
      <easy-loadimage v-if="item?.image" :image-src="item?.image"></easy-loadimage>
      <view v-if="item?.stock == 0" class="sell_out">已售罄</view>
      <view
        v-if="item?.border_pic"
        :style="{ backgroundImage: `url(${item?.border_pic})` }"
        class="border-picture"
      >
      </view>
    </view>
    <view class="text">
      <view class="name line2">{{ item?.store_name || item?.title }}</view>

      <view class="item_tags acea-row">
        <text
          v-if="item?.merchant?.type_name && item?.product_type == 0"
          class="font-bg-red b-color"
          >{{ item?.merchant?.type_name }}</text
        >
        <text
          v-else-if="item?.merchant?.is_trader && item?.product_type == 0"
          class="font-bg-red b-color"
          >自营</text
        >
        <text class="tags_item ticket" v-if="item?.issetCoupon"
          >{{ item?.issetCoupon?.coupon_price }}元</text
        >
        <text class="tags_item delivery" v-if="item?.delivery_free == 1">包邮</text>
      </view>
      <view class="acea-row row-middle">
        <view class="money" v-if="item?.price"
          >￥ <text class="num">{{ item?.after_coupon_price || item?.price }}</text>
        </view>
        <view class="money" v-else-if="item?.originalPrice"
          >￥ <text class="num">{{ item?.originalPrice }}</text>
        </view>
        <view v-else-if="!item?.content.includes('<')" class="name line2">{{ item?.content }}</view>
        <view class="name line2" v-else>
          {{ item?.title }}
        </view>
      </view>
      <view class="buy_num"> {{ item?.sales }}人已付款 </view>
      <view
        v-if="item?.show_svip_info?.show_svip && item?.show_svip_info?.show_svip_price"
        class="acea-row row-middle svip"
      >
        <text class="vip-money">￥{{ item?.svip_price }}</text>
        <view class="vipImg">
          <image src="/static/images/svip.png"></image>
        </view>
      </view>
      <view class="score1" v-if="item?.avatar">
        <image
          :src="item?.avatar || 'https://ossresource.miyingbl.com/uploads/20230901/test/logo.png'"
        />
        <view class="name1 u-line-1">{{ item?.nickname }}</view>
      </view>
      <!--<view
        class="company"
        v-if="item?.merchant"
        @click.stop="goShop(item?.merchant?.mer_id, item?.id)"
      >
        <text class="line1">{{ item?.merchant?.mer_name }}</text>
        <view class="flex" v-if="isStore != '1'">
          进店
          <text class="iconfont icon-xiangyou"></text>
        </view>
      </view>-->
    </view>
    <!-- 返佣 -->
    <block v-if="item?.max_extension > 0 && (item?.product_type == 0 || item?.product_type == 2)">
      <view class="foot-bar">
        <text class="iconfont icon-fenxiang"></text>
        最高赚 ¥{{ item?.max_extension }}
      </view>
    </block>
  </view>
  <view v-else-if="type == 2" class="new_card" :style="viewColor">
    <easy-loadimage v-if="item?.image" :image-src="item?.image"></easy-loadimage>
    <view class="title u-line-2">{{ item?.store_name || item?.title }}</view>
    <!-- <view class="tags">
            <view class="tag">三年经验</view>
            <view class="tag">省心</view>
        </view> -->
    <view class="coupons" v-if="item?.coupon_info?.coupon_price">
      <text class="coupon">{{ item?.coupon_info?.coupon_price }}元</text>
    </view>
    <view class="points_list" v-if="item?.points && types != 'sp'">
      <view
        class="points"
        v-for="(point, index) of changeArr(item?.points.split(','))"
        :key="index"
        >{{ point?.length > 4 ? point?.substring(0, 4) : point }}</view
      >
    </view>
    <view class="subtitle" v-if="item?.subtitle"> {{ item?.subtitle?.substring(0, 8) }}</view>
    <view class="item_guanfang" v-if="item?.is_trader">官方正品有保障</view>
    <view class="h_price">
      <view class="h_prices" v-if="item?.originalPrice || item?.money">
        <text class="price_icon">￥ </text>
        <text class="price_text">{{
          parseFloat(Number(item?.money)) || parseFloat(Number(item?.originalPrice))
        }}</text>
        <text class="original">起</text>
      </view>
      <view class="h_prices" v-else>
        <text class="price_icon">￥ </text>
        <text class="price_text">{{
          parseFloat(+item?.after_coupon_price) ||
          item?.price?.replace(/\.00$/, '') ||
          item?.money?.replace(/\.00$/, '')
        }}</text>
        <span v-if="item?.after_coupon_price" class="coupon_text">券后</span>
      </view>
      <view class="h_price_s" v-if="item?.ot_price != '0.00' && item?.ot_price">
        ￥ {{ parseFloat(Number(item?.ot_price)) }}
      </view>
      <view class="h_price_s" v-if="item?.originalPrice != '0.00' && item?.originalPrice"
        >￥{{ parseFloat(Number(item?.originalPrice)) }}
      </view>
      <view class="h_price_s" v-if="item?.hxj_price != '0.00' && item?.hxj_price"
        >￥{{ parseFloat(Number(item?.hxj_price)) }}
      </view>
    </view>
    <view class="store" v-if="item?.mer_name && types != 'sp'">
      <image class="store_photo" src="@/static/images/store-photo.png" />
      <view class="store_name"
        ><text>{{
          item?.mer_name?.length > 6 ? item?.mer_name?.substring(0, 6) : item?.mer_name
        }}</text></view
      >
      <image
        class="address_icon"
        v-if="item?.distance"
        src="@/static/images/store-address-icon.png"
      />
      <view class="store_address" v-if="item?.distance">{{ item?.distance }}</view>
    </view>
    <view class="sales" v-if="item?.sales && types == 'sp'"> {{ item?.sales }}人已付款 </view>
  </view>
</template>

<script>
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
// import {mapGetters} from "vuex";
export default {
  components: {
    easyLoadimage,
  },
  // computed: mapGetters(['viewColor']),
  props: {
    item: {
      type: Object,
      require: true,
    },
    type: {
      type: Number,
      default: 0,
    },
    isStore: {
      type: [String, Number],
      default: '1',
    },
    isLogin: {
      type: Boolean,
      require: false,
    },
    types: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      viewColor:
        '--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;',
    }
  },
  mounted() {},
  methods: {
    goShop(id) {
      this.$emit('goShop', id)
    },
    authOpen() {
      this.$emit('authOpen')
    },
    followToggle(item) {
      this.$emit('followToggle', item)
    },
    changeArr(arr) {
      let newArr = []
      if (arr?.length) {
        for (let i = 0; i < arr?.length; i++) {
          if (arr[i].length == 4) {
            newArr.push(arr[i])
            if (newArr.length == 1) {
              if (newArr[0].length == 4) {
                if (arr[i].length == 2) {
                  newArr.push(arr[i])
                }
              }
            }
            if (newArr.length == 2) {
              return newArr
            }
          } else if (arr[i].length == 3) {
            newArr.push(arr[i])
            if (newArr.length >= 2) {
              return newArr
            }
          } else if (arr[i].length <= 2) {
            newArr.push(arr[i])
            if (newArr.length >= 3) {
              return newArr
            }
          } else {
            newArr.push(arr[i])
          }
        }
      }

      return newArr
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/shop.scss';

.new_card {
  background-color: #fff;
  border-radius: 10rpx;
  padding-bottom: 20rpx;
  overflow: hidden;
  .subtitle {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #ffb300;
    margin: 8rpx 0 0 18rpx;
  }

  .points_list {
    display: flex;
    align-items: center;
    margin: 18rpx 0 18rpx 18rpx;

    .points {
      margin-right: 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 21rpx;
      color: #ffffff;
      padding: 2rpx 15rpx;
      border-radius: 45rpx;
      background: #ffb300;
    }
  }

  .sales {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #4f4f4f;
    margin: 10rpx 0 0 18rpx;
  }

  .title {
    padding: 0 18rpx;
    font-weight: 500;
    font-size: 26rpx;
    color: #000000;
  }

  .tags {
    padding: 0 18rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .tag {
      padding: 0 9rpx;
      font-size: 21rpx;
      height: 33rpx;
      background: #ffb300;
      border-radius: 45rpx 45rpx 45rpx 45rpx;
      margin-right: 12rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 18rpx;
      line-height: 1;
    }
  }

  .coupons {
    padding: 0 18rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18rpx;

    .coupon {
      width: 117rpx;
      height: 35rpx;
      background: url('@/static/images/youhuiquan.png') center center;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 22rpx;
      color: #ffffff;
      line-height: 35rpx;
      padding-left: 50rpx;
    }
  }

  .h_price {
    display: flex;
    padding: 0 18rpx;
    margin-top: 8rpx;
    align-items: center;
    .h_prices {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 36rpx;
      color: #da180a;
      margin-right: 12rpx;
      font-family: PingFang SC, PingFang SC;
      .price_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 36rpx;
        color: #da180a;
      }
      .price_icon {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #da180a;
        margin-right: -7rpx;
        margin-top: 5rpx;
      }
      .coupon_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #da180a;
        margin-top: 8rpx;
        width: 42rpx;
      }
      .original {
        margin-top: 3rpx;

        margin-left: 9rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #da180a;
      }

      text {
        font-size: 20rpx;
      }
    }

    .h_price_s {
      font-weight: 400;
      font-size: 22rpx;
      margin-top: 10rpx;

      color: #999;
      text-decoration: line-through;
    }
  }

  .store {
    padding: 0 18rpx;
    margin-top: 11rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .store_photo {
      width: 29rpx;
      height: 26rpx;
      margin-right: 5rpx;
    }

    .store_name {
      flex: 1;
      font-weight: 500;
      font-size: 24rpx;
      color: #7f7f7f;
    }

    .address_icon {
      width: 18rpx;
      height: 24rpx;
      margin-right: 3rpx;
    }

    .store_address {
      font-weight: 500;
      font-size: 24rpx;
      color: #7f7f7f;
    }
  }
}

.wf-item-page {
  background: #fff;
  overflow: hidden;
  border-radius: 16rpx;
  padding-bottom: 20rpx;
}

.wf-page0 .coupon {
  background: rgba(255, 248, 247, 1);
  border: 1px solid rgba(233, 51, 35, 1);
  border-radius: 4rpx;
  font-size: 20rpx;
  margin-left: 18rpx;
  padding: 1rpx 4rpx;
}

.wf-page0 .pictrue {
  width: 100% !important;
  //   height: 345rpx;
  position: relative;

  ::v-deep image,
  ::v-deep .easy-loadimage,
  uni-image {
    // height: 345rpx;
    border-radius: 16rpx 16rpx 0 0;
  }

  .border-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16rpx 16rpx 0 0;
    background: center/cover no-repeat;
  }
}

.buy_num {
  font-weight: 500;
  font-size: 22rpx;
  color: #4f4f4f;
  margin-top: 8rpx;
  text-align: left;
}

.loadfail-img {
  width: 100%;
  height: 360rpx;
}

.svip {
  margin: 5rpx 0 15rpx;
}

.vip-money {
  color: #282828;
  font-size: 22rpx;
  margin-left: 6rpx;
  font-weight: bold;
}

.vipImg {
  width: 65rpx;
  height: 28rpx;
  margin-left: 4rpx;

  image {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.wf-page0 .name {
  font-weight: 500;
  font-size: 26rpx;
  color: #000000;
  margin: 18rpx 0 10rpx 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}

.wf-page0 .text {
  padding: 0 20rpx;
}

.wf-page0 .money {
  font-size: 20rpx;
  font-weight: bold;
  //color: var(--view-priceColor);
  color: #da180a;
}

.b-color {
  background-color: var(--view-theme);
  border: 1px solid var(--view-theme);
}

.wf-page0 .money .num {
  font-size: 34rpx;
}

.wf-page1 .wf-item {
  .name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    font-weight: 500;
    font-size: 26rpx;
    color: #000000;
  }
}

.wf-page1 .pictrue {
  position: relative;
  //   height: 345rpx;
  width: 100% !important;

  ::v-deep image,
  ::v-deep .easy-loadimage,
  uni-image {
    // height: 345rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .border-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20rpx 20rpx 0 0;
    background: center/cover no-repeat;
  }
}

.sell_out {
  display: flex;
  width: 150rpx;
  height: 150rpx;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -75rpx 0 0 -75rpx;

  &::before {
    content: '';
    display: block;
    width: 140rpx;
    height: 140rpx;
    border-radius: 100%;
    border: 1px dashed #fff;
    position: absolute;
    top: 5rpx;
    left: 5rpx;
  }
}

.loading-img {
  height: 345rpx;
  max-height: 360rpx;
}

.wf-page1 .text {
  padding: 0 17rpx 20rpx 17rpx;
  font-size: 30rpx;
  color: #222;
}

.wf-page1 .text .money {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  margin-top: 8rpx;
  // color: var(--view-priceColor);
  color: #e93323;
}

.wf-page1 .text .money .num {
  font-size: 34rpx;
}

.item_tags {
  margin-top: 8rpx;
  display: flex;
}

.item_tags .tags_item {
  display: flex;
  font-size: 20rpx;
  text-align: center;
  border-radius: 5rpx;
  padding: 0 4rpx;
  height: 28rpx;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}
.item_guanfang {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 22rpx;
  color: #ffb300;
  line-height: 31rpx;
  text-align: left;
  font-style: normal;
  margin-left: 18rpx;
  padding-top: 11rpx;
  text-transform: none;
}
.item_tags .tags_item.ticket {
  width: 117rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: url('@/static/shop/quan.png') no-repeat;
  background-size: 100% 100%;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20rpx;
  color: #ffffff;
  line-height: 36rpx;
  text-align: left;
  box-sizing: border-box;
  padding-left: 30rpx;
}

.item_tags .tags_item.delivery {
  color: #ff9000;
  border: 1px solid #ff9000;
}

.wf-page1 .text .money .ticket-big {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 163rpx;
  padding: 0 6rpx;
  height: 28rpx;
  margin-left: 10rpx;
  background-image: url(~static/images/yh.png);
  background-size: 100% 100%;
  font-size: 20rpx;
  font-weight: normal;
}

.wf-page1 .text .score {
  margin-top: 10rpx;
  color: #737373;
  font-size: 20rpx;
}

.score1 {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  image {
    width: 35rpx;
    height: 35rpx;
    border-radius: 50%;
  }

  .name1 {
    font-size: 20rpx;
  }
}

.wf-page1 .text .company {
  display: flex;
  align-items: center;
  color: #737373;
  font-size: 20rpx;
  margin-top: 10rpx;

  .line1 {
    max-width: 200rpx;
  }

  .flex {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    color: #282828;

    .iconfont {
      font-size: 16rpx;
      margin-top: 4rpx;
    }
  }
}

.foot-bar {
  width: 100%;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
  border-radius: 0px 0px 16rpx 16rpx;
  color: #fff;
  font-size: 24rpx;

  .icon-fenxiang {
    font-size: 24rpx;
    margin-right: 10rpx;
  }
}
</style>
